<!--
 * @Description:
 * @Author: FangYaoTang
 * @Date: 2023-08-16 09:21:26
 * @LastEditor: FangYaoTang
 * @LastEditTime: 2023-09-12 14:33:09
 * @Copyright: by 南阳剧有钱网络科技有限公司 禁止任何形式（包含二次开发）转售系统源码，违者必究。
-->

<template>
  <view class="page_content">
    <view class="head_content" v-if="!isDrag">
      <CustomNavbar color="#fff" :title="videoInfo.title"></CustomNavbar>
    </view>
    <view class="vmask" v-if="isNeedToPay">
      <image class="bg" :src="videoInfo.cover" mode="aspectFill"></image>
      <view class="centerinfo">
        <view class="text">{{ $t('a102') }}</view>
        <view class="btn" @click="beforePlay">{{ $t('a103') }}</view>
      </view>
      <view class="infobox">
        <view class="content">
          <view class="left">
            <text class="text1">{{ videoInfo.title }}</text>
            <text class="text2">{{ videoData[videoIndex].name }}</text>
          </view>
          <view class="right" :style="'color:' + isColor" @click="isShowMenu = true">{{
            $t('a104')
          }}</view>
        </view>
      </view>
    </view>
    <view class="vmask" v-if="isLastPage">
      <image class="bg" :src="videoInfo.cover" mode="aspectFill"></image>
      <view class="centerinfo">
        <view class="text">
          {{ $t('a105') }} <br />
          {{ $str($t('a107'), lockCount) }}
        </view>
        <view class="btn" @click="changeOriginIndex(lockCount)">{{ $t('a106') }}</view>
      </view>
      <view class="infobox">
        <view class="content">
          <view class="left">
            <text class="text1">{{ videoInfo.title }}</text>
            <text class="text2">{{ videoData[videoIndex].name }}</text>
          </view>
          <view class="right" @click="isShowMenu = true">{{ $t('a104') }}</view>
        </view>
      </view>
    </view>
    <view class="main_content" :style="[{ paddingTop: barHeight + 'px' }]">
      <swiper
        class="swiper"
        :circular="circular"
        :vertical="true"
        :duration="300"
        :current="current"
        @change="swiperChange"
      >
        <block v-for="(item, index) in videoData" :key="index">
          <swiper-item class="swiper_item">
            <view class="videos" v-if="videoIndex == index" @click="videoClick">
              <video
                @touchend="handleTouchEnd"
                @longpress="longpressMenu"
                class="video"
                v-if="!isNeedToPay"
                :id="'vplayer' + index"
                :ref="'vplayer' + index"
                :loop="false"
                :controls="false"
                :autoplay="true"
                :object-fit="isLandscape ? 'contain' : 'cover'"
                :enable-progress-gesture="true"
                :show-center-play-btn="false"
                :src="item.url"
                :poster="item.image"
                @play="doPlay(item, index)"
                @pause="isPlaying = false"
                @timeupdate="videoTimeUpdate"
                @ended="videoEnded"
                @error.prevent="videoError(item)"
                @loadedmetadata="VideoLoadedmetadata"
              ></video>
              <view class="verror" v-if="isPlayError">
                <image class="image" :src="videoInfo.cover" mode="aspectFill"></image>
                <view class="content">
                  <u-icon name="info-circle-fill" color="#fff" size="50"></u-icon>
                  <text class="text">{{ $t('a108') }}</text>
                </view>
              </view>
            </view>
            <view class="vcover" v-else>
              <image class="image" :src="videoInfo.cover" mode="aspectFill"></image>
            </view>
            <view
              class="buttons"
              v-if="!isDrag && !isNeedToPay && !isPlayError && videoIndex == index"
            >
              <u-icon
                v-if="!isPlaying"
                name="play-right-fill"
                color="rgba(255, 255, 255, 0.8)"
                :size="60"
              ></u-icon>
            </view>
            <view
              class="sidebar"
              v-if="!isDrag && !isNeedToPay && !isPlayError && videoIndex == index"
            >
              <view class="item" @click="handleLikes(item.id, index)">
                <!-- <image
                  class="image"
                  :src="`https://img.nymaite.com/video_short/icons/likes_${
                    item.is_like ? 1 : 0
                  }.png`"
                  mode="widthFix"
                ></image> -->
                <u-icon
                  name="heart-fill"
                  size="38"
                  :color="item.like === 1 ? '#C60412' : '#fff'"
                ></u-icon>

                <text class="text">{{ item.likes }}</text>
              </view>
              <view class="item" @click="handleCollect(item.id, index)">
                <u-icon
                  name="star-fill"
                  size="38"
                  :color="item.favor === 1 ? '#C60412' : '#fff'"
                ></u-icon>
                <text class="text">{{ item.favorites }}</text>
              </view>
              <view class="item" @click="handleShare(item.id, index)">
                <u-icon name="share-fill" size="38" color="#fff"></u-icon>
                <text class="context">{{ item.shares }}</text>
              </view>
              <view class="item" @click="isShowMenu = true">
                <img
                  src="../../../static/images/play_icon/ic_quanji@2x.png"
                  style="width: 70rpx; height: 70rpx"
                />
                <text class="context">{{ videoInfo.length }}</text>
              </view>
            </view>
            <view class="infobox" v-if="!isDrag && !isNeedToPay && videoData.length">
              <!-- <view class="content">
								<view class="left">
									<text class="text1">{{ videoInfo.title }}</text>
									<text class="text2">{{ originData[originIndex].name }}</text>
								</view>
								<view class="right" :style="'color:' + isColor" @click="isShowMenu = true">选集</view>
							</view> -->
            </view>
            <view class="progress" v-if="!isNeedToPay && duration > 0 && videoIndex == index">
              <view class="formation" style="align-items: center" v-if="speedNum">
                <view class="speedNumBox">
                  <text
                    @click.stop="handleSetSpeedRate(0.5)"
                    :class="[0.5 == speedRate ? activeClass : errorClass, 'number']"
                    >0.5x</text
                  >
                  <text
                    @click.stop="handleSetSpeedRate(1)"
                    :class="[1 == speedRate ? activeClass : errorClass, 'number']"
                    >1.0x</text
                  >
                  <text
                    @click.stop="handleSetSpeedRate(1.25)"
                    :class="[1.25 == speedRate ? activeClass : errorClass, 'number']"
                    >1.25x</text
                  >
                  <text
                    @click.stop="handleSetSpeedRate(1.5)"
                    :class="[1.5 == speedRate ? activeClass : errorClass, 'number']"
                    >1.5x</text
                  >
                  <text
                    @click.stop="handleSetSpeedRate(2.0)"
                    :class="[2.0 == speedRate ? activeClass : errorClass, 'number']"
                    >2.0x</text
                  >
                </view>
              </view>
              <view class="content" style="padding: 10rpx 24rpx">
                <text class="text1">{{ videoInfo.title }}</text>
                <text class="text2">{{ originData[originIndex].name }}</text>
              </view>
              <view class="barview" :class="{ active: isDrag }">
                <slider
                  :value="currentTime"
                  :min="0"
                  :max="duration"
                  :blockSize="6"
                  backgroundColor="#333"
                  activeColor="#fff"
                  @change="sliderChange"
                  @changing="sliderChanging"
                >
                </slider>
              </view>

              <view class="flex" style="justify-content: space-between; padding: 0 24rpx">
                <view class="bartext">
                  <text class="text1">{{ dragEndTime }}</text>
                  <text class="text0">/</text>
                  <text class="text2">{{ dragStarTime }}</text>
                </view>
                <view class="bartext">
                  <text class="text1">x{{ speedRate }}</text>
                </view>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
      <view class="verror" v-if="isPlayError">
        <image class="image" :src="videoInfo.cover" mode="aspectFill"></image>
        <view class="content">
          <u-icon name="info-circle-fill" color="#fff" size="50"></u-icon>
          <text class="text">{{ $t('a108') }}</text>
        </view>
      </view>

      <!-- <view class="video-divider"></view> -->
      <VideoMenu
        v-if="isShowMenu"
        :show="isShowMenu"
        :info="{ title: videoInfo.title, length: videoInfo.length }"
        :data="originData"
        :current="originIndex"
        @selected="changeOriginIndex"
        @close="isShowMenu = false"
        @showpay="isShowPay = true"
      >
      </VideoMenu>
    </view>
    <!-- <view class="footer_content">
      <u-safe-bottom></u-safe-bottom>
    </view>
    <u-notify ref="uNotify"></u-notify> -->
  </view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar.vue'
let _options = {}
import VideoMenu from './components/VideoMenu.vue'
import jsBridge from 'ym-jsbridge'

export default {
  components: {
    VideoMenu,
    CustomNavbar
    // uIcon
  },
  data() {
    return {
      adList: [],
      activeClass: 'active',
      errorClass: 'noActive',
      speedRate: 1,
      speedNum: false,
      isColor: '#fff',
      current: 0,
      currentTime: 0, // 当前视频播放进度
      currentPrice: 0, // 当前视频积分
      prevTime: 0, // 上次视频进度

      duration: 0, // 当前视频总时长
      isDrag: false, // 拖动进度条状态
      dragStarTime: '00:00', // 拖拽开始时长
      dragEndTime: '00:00', // 拖拽结束时长

      isPlaying: false, // 播放状态
      isPlayError: false, // 播放错误

      clickNum: 0, // 点击次数
      clickTimer: null, // 点击定时器

      isShowMenu: false, // 显示菜单
      isShowPay: false, // 显示支付

      isNeedToPay: false, // 需要支付
      isLoading: true, // 加载中
      barHeight: uni.getSystemInfoSync().statusBarHeight,
      isLastPage: false, // 最后一页

      originData: [], // 源数据
      originIndex: 0, // 源数据索引
      oldIndex: 0, // 源数据上一次索引
      circular: true, // swiper首尾循环

      videoInfo: {
        id: '',
        title: '',
        cover: '',
        length: '',
        collect: 0,
        isCollect: 0,
        share: 0
      },
      videoData: [], // 渲染数据
      videoIndex: 0, // 渲染数据索引

      isLandscape: true, // 是否横屏

      videoAd: null,
      isLoaded: false,
      userInfo: {},
      navTop: 0,
      videoAutoplay: 0,
      videoWidth: 0,
      clientHeight: 0,
      isLongPress: false,
      ceshi1: false,
      loadAd: false
    }
  },
  computed: {
    // ...mapGetters('user', ['token', 'userInfo', 'showAd']),
    // ...mapGetters('app', ['videoAutoplay', 'config']),
    lockCount() {
      const count = this.originData.findIndex((item) => !item.url)
      return count
    }
  },
  watch: {
    // 付费
    // isNeedToPay(newValue, oldValue) {
    // 	if (newValue) {
    // 		this.isShowPay = true
    // 		this.videoPause()
    // 	}
    // },

    originIndex(newValue, oldValue) {
      this.speedRate = 1
    },
    token(newValue, oldValue) {
      // #ifdef MP-WEIXIN
      newValue && this.config?.uniad_switch == '1' && this.config?.adpid && this.adCheck()
      // #endif
    }
  },
  onLoad(option) {
    let vm = this
    uni.getSystemInfo({
      success: function (res) {
        vm.videoWidth = res.screenWidth - 16
        vm.clientHeight = res.screenHeight
      }
    })
    console.log(option, 'option')
    this.navTop = uni.$u.addUnit(
      uni.$u.getPx(uni.$u.props.navbar.height) + uni.$u.sys().statusBarHeight,
      'px'
    )
    this.winWidth = uni.getSystemInfoSync().windowWidth + 'px'
    if (option.id) {
      _options = option.d && JSON.parse(option.d)
      this.videoInfo.id = option.id
      this.getVideoMenu()
    }
  },
  onUnload() {
    this.saveVideoProgress()
    //移除监听器，不会再收到回调通知
    this.jsBridge.zj.removeListener()
  },
  onHide() {
    this.saveVideoProgress()
    //移除监听器，不会再收到回调通知
  },
  onShow() {},
  onShareAppMessage(res) {
    // #ifdef MP-WEIXIN
    return {
      title: this.videoInfo.title,
      path: `/pages/video/play?scene=${this.shareData.spm}&id=${this.videoInfo.id}`,
      imageUrl: this.videoInfo.cover
    }
    // #endif
  },
  onShareTimeline(res) {},
  methods: {
    setListener() {
      let item = this.videoData[this.videoIndex]
      let vm = this
      jsBridge.zj.setListener(function (event, data) {
        switch (event) {
          case 'RewardVideo': {
            switch (data.action) {
              //广告请求成功
              case 'onZjAdLoaded': {
                break
              }
              //视频素材缓存成功，可在此回调后进行广告展示
              case 'onZjAdVideoCached': {
                break
              }
              //激励视频广告页面展示
              case 'onZjAdShow': {
                break
              }
              //广告展示出错
              case 'onZjAdShowError': {
                break
              }
              //激励视频广告被点击
              case 'onZjAdClick': {
                break
              }
              //激励视频播放完毕
              case 'onZjAdVideoComplete': {
                break
              }
              //激励视频触发激励（观看视频大于一定时长或者视频播放完毕）
              //可以在此回调中发放奖励
              case 'onZjAdReward': {
                jsBridge.toast('奖励已发放')
                item.showAd = true

                vm.$request('video.adveStatis', {
                  adveId: 'J0573110927'
                }).then((res) => {})
                break
              }
              //激励视频广告被关闭
              case 'onZjAdClose': {
                if (item.showAd) {
                  vm.$nextTick(function () {
                    vm.isNeedToPay = false
                  })
                }
                break
              }
              //广告流程出错
              case 'onZjAdError': {
                break
              }
            }
            break
          }
        }
        vm.loadAd = false
        console.log('------------------call', data)
      })
    },
    onZjAdClose(id) {
      // this.isNeedToPay = false
      this.ceshi1 = false
      this.$set(this, 'isNeedToPay', false)
      console.log(this, id, '----- onZjAdClose -------- isNeedToPay')
      // })
      this.adList.push(id)
    },
    doPlay(item, index) {
      console.log('---- doPlay ---- ', item, item.adve)
      if (item.adve == 0 || item.showAd) {
        this.isPlaying = true
        this.isPlayError = false
        this.isNeedToPay = false
      } else {
        this.isNeedToPay = true
      }
    },
    handleTouchEnd(event) {
      console.log('handleTouchEnd')
      // 如果手指收回，并且之前进行了长按，则执行操作
      if (this.isLongPress) {
        // 执行操作
        let videoContext = this.getVideoCtx()
        videoContext.playbackRate(1)
        this.speedRate = 1
        this.isLongPress = false

        let clickTimer = setTimeout(() => {
          this.speedNum = false
          clearTimeout(clickTimer)
        }, 2000)
      }
    },
    handleSetSpeedRate(rate) {
      let videoContext = this.getVideoCtx()
      videoContext.playbackRate(rate)
      this.speedRate = rate
      this.speedNum = false
      uni.showToast({
        title: `x${rate}`,
        icon: 'none'
      })
    },
    longpressMenu() {
      let videoContext = this.getVideoCtx()
      videoContext.playbackRate(2)
      this.speedNum = true
      this.isLongPress = true
      this.speedRate = 2
    },
    handleShare(row, index) {
      uni.showToast({
        title: 'null',
        icon: 'none'
      })
    },
    onTimer() {
      // this.initSwiperData(this.originIndex)
      //TODO 定时查询订单
    },
    onRouter(type) {
      console.log('123', type, 's34')
      webUni.postMessage({
        data: {
          type: type || 'back'
        }
      })
    },
    updateUserInfo() {
      userInfo().then((resp) => {
        this.userInfo = resp.data
      })
    },
    // ...mapActions('user', ['checkAdTask']),
    async adCheck() {
      // #ifdef MP-WEIXIN
      console.log('zouzhele')
      await this.checkAdTask()
      if (this.showAd) {
        if (this.videoAd) this.adShow()
        else this.adInit()
      } else {
        this.isLoaded = false
      }
      // #endif
    },
    adInit() {
      // #ifdef MP-WEIXIN
      // 在页面onLoad回调事件中创建激励视频广告实例
      if (wx.createRewardedVideoAd) {
        this.videoAd = wx.createRewardedVideoAd({
          adUnitId: this.config.adpid
        })
        this.videoAd.onLoad(() => (this.isLoaded = true))
        this.videoAd.onError(() => (this.isLoaded = false))
        this.videoAd.onClose((res) => {
          if (res && res.isEnded) {
            this.$request('task.finish', {
              type: 'uniad_success'
            }).then((res) => {
              res.code == 1 && (this.$u.toast('奖励已发放'), this.checkAdTask())
            })
          }
          this.videoPlay()
        })
      }
      // #endif
    },
    adShow() {
      // #ifdef MP-WEIXIN
      // 用户触发广告后，显示激励视频广告
      if (this.videoAd) {
        this.videoPause()
        this.videoAd.show().catch(() => {
          // 失败重试
          this.videoAd
            .load()
            .then(() => this.videoAd.show())
            .catch(() => this.videoPlay())
        })
      } else {
        this.adCheck()
      }
      // #endif
    },
    // 保存视频进度
    saveVideoProgress() {
      if (!this.isNeedToPay) {
        const obj = {
          vid: this.videoInfo.id,
          episode_id: this.videoData[this.videoIndex].id,
          type: 'log',
          view_time: this.currentTime
        }
        this.$request('video.addUserRecord', obj)
      }
    },
    // 选集
    changeOriginIndex(index) {
      this.originIndex = index
      this.initSwiperData(index)
    },
    // 获取节目单
    getVideoMenu() {
      const vm = this
      let status = uni.getSystemInfoSync().uniPlatform
      this.$request('video.addonsDetail', {
        id: this.videoInfo.id,
        platform: status == 'mp-weixin' ? 2 : 1
      }).then((res) => {
        console.log(res, 'VideoToken')
        const { title, image, episodes, favorites, shares, favor, adve } = res.data.video
        this.videoInfo.title = title
        this.videoInfo.cover = image
        this.videoInfo.length = episodes
        this.videoInfo.collect = favorites
        this.videoInfo.isCollect = favor
        this.videoInfo.share = shares
        this.videoInfo.adve = adve
        this.videoInfo.episodes = episodes
        res.data.episodes.forEach((v) => {
          // v.price = v.vprice
          v.url = v.video
          v.is_like = v.likes
          v.isCollect = v.favor
        })
        if (res.data.episodes && res.data.episodes.length) {
          // console.log('---videoList--',res,'videoList')
          vm.prevTime = _options.viewTime
          vm.currentTime = _options.viewTime
          const index = _options?.episodeId
            ? res.data.episodes.findIndex((item) => item.id == _options.episodeId)
            : 0
          vm.originIndex = index != -1 ? index : 0
          vm.originData = res.data.episodes
          vm.initSwiperData(vm.originIndex, 1)
        } else {
          vm.isPlayError = true
        }
      })
    },
    // 初始化swiper数据
    initSwiperData(originIndex = this.originIndex, init = 0) {
      const vm = this
      const originDataLength = this.originData.length
      const videoList = []
      videoList[this.videoIndex] = this.originData[originIndex]
      videoList[this.videoIndex - 1 == -1 ? 2 : this.videoIndex - 1] =
        this.originData[originIndex - 1 == -1 ? originDataLength - 1 : originIndex - 1]
      videoList[this.videoIndex + 1 == 3 ? 0 : this.videoIndex + 1] =
        this.originData[originIndex + 1 == originDataLength ? 0 : originIndex + 1]
      this.videoData = videoList

      if (this.oldIndex >= this.originData.length) {
        this.oldIndex = 0
      }
      if (this.oldIndex < 0) {
        this.oldIndex = this.originData.length - 1
      }

      // 重置进度条状态
      this.duration = 0
      this.currentTime = 0
      this.isDrag = false
      this.isPlayError = false
      this.isLastPage = false
      this.isPlaying = false

      this.currentPrice = Number(this.videoData[this.videoIndex].price)
      // 播放授权
      console.log('this.oldIndex:', this.currentPrice)
    },
    // swiper切换
    swiperChange(event) {
      const { current } = event.detail
      const originDataLength = this.originData.length
      this.saveVideoProgress()
      if (this.videoIndex - current == 2 || this.videoIndex - current == -1) {
        this.originIndex = this.originIndex + 1 == originDataLength ? 0 : this.originIndex + 1
        this.videoIndex = this.videoIndex + 1 == 3 ? 0 : this.videoIndex + 1
        this.oldIndex = this.originIndex - 1
        this.initSwiperData(this.originIndex)
      } else if (this.videoIndex - current == -2 || this.videoIndex - current == 1) {
        this.originIndex = this.originIndex - 1 == -1 ? originDataLength - 1 : this.originIndex - 1
        this.videoIndex = this.videoIndex - 1 == -1 ? 2 : this.videoIndex - 1
        this.oldIndex = this.originIndex + 1
        this.d(this.originIndex)
      }
    },
    // 播放之前
    beforePlay(init = 0) {
      if (this.loadAd) {
        return
      }
      this.loadAd = true
      const obj = {
        vid: this.videoInfo.id,
        episode_id: this.videoData[this.videoIndex].id,
        platform: this.$utils.platforms()
      }
      if (this.videoData[this.videoIndex].adve == 1) {
        let vm = this
        jsBridge.zj.rewardVideo(
          {
            //必须，字符串类型，激励视频广告位ID
            posId: uni.getSystemInfoSync().platform == 'ios' ? 'J0573110927' : 'J0573110927',
            //用户标识，一般为用户账号ID，以便在处理服务器通知时给此用户发放奖励
            userId: obj.episode_id,
            //附加信息
            extra: '任意字符串'
          },
          function (succ, data) {
            console.log(succ, data, '----------------------- setListener')
            vm.ceshi1 = true
            vm.loadAd = false
            vm.setListener()
            if (!succ) {
              alert(JSON.stringify(data))
            }
          }
        )
        // vm.isNeedToPay = false
        vm.saveVideoProgress()
      } else {
        let vm = this
        if (
          vm.originIndex == vm.originData.length - 1 &&
          vm.originIndex != vm.originData.findIndex((item) => !item.url)
        ) {
          vm.isLastPage = true
        } else {
          vm.beforePlay(init)
        }
        vm.loadAd = false
      }

      console.log('res', "this.$request('video.play', obj).then(res => {")
      // this.videoData[this.videoIndex].url = res.data
      this.isNeedToPay = true
      this.isShowPay = true
      this.updateUserInfo()
      // this.$utils.platforms() === 'wxOfficialAccount' &&
      // 	uni.getSystemInfoSync().platform == 'ios'
    },
    // 播放
    videoPlay() {
      const video = this.getVideoCtx()
      if (!video) return
      video.play()
      this.isPlaying = true
    },
    // 暂停
    videoPause() {
      const video = this.getVideoCtx()
      if (!video) return
      video.pause()
      this.isPlaying = false
    },
    // 播放结束
    videoEnded(e) {
      if (this.originIndex == this.originData.length - 1) {
        console.log('播放结束')
      } else {
        // ##ifdef H5
        if (
          // this.$utils.platforms() === 'wxOfficialAccount' &&
          uni.getSystemInfoSync().platform == 'ios'
        ) {
          if (this.videoIndex < 2) {
            this.current = this.videoIndex + 1
          } else {
            this.current = 0
          }
        } else {
          if (this.videoAutoplay == 1) {
            if (this.videoIndex < 2) {
              this.current = this.videoIndex + 1
            } else {
              this.current = 0
            }
          }
        }
        // ##endif

        // #ifndef H5
        if (this.videoIndex < 2) {
          this.current = this.videoIndex + 1
        } else {
          this.current = 0
        }
        // #endif
      }
    },
    // 播放错误
    videoError(videoItem) {
      // this.isPlayError = true
      // this.isLoading = false
      setTimeout(() => {
        let video = document.getElementById('video' + videoItem.id)
        video.onerror = function () {
          // 这里要用onerror
          videoItem.status = false
          video.src = videoItem.video
          video.onerror = null // 避免加载失败后陷入死循环
        }
        video.src = videoItem.video
      }, 100)
    },
    // 点击
    videoClick(e) {
      this.clickTimer && clearTimeout(this.clickTimer)
      this.clickNum++
      this.clickTimer = setTimeout(() => {
        if (this.clickNum >= 2) {
          console.log('你双击了')
        } else {
          console.log('你单击了', JSON.stringify(_options))
          if (this.isPlaying) {
            this.videoPause()
          } else {
            this.videoPlay()
          }
        }
        this.clickNum = 0
      }, 250)
    },
    // 元数据加载完毕
    VideoLoadedmetadata(e) {
      const { width, height } = e.detail
      this.isLandscape = width >= height ? true : false
      console.log('-------VideoLoadedmetaata:', e)
    },
    // 获取video标签上下文
    getVideoCtx() {
      return uni.createVideoContext('vplayer' + this.videoIndex, this)
    },
    // 点赞
    handleLikes(id, index) {
      const obj = {
        episode_id: id,
        type: 'like'
      }
      this.$request('video.likes', obj).then((res) => {
        // if (res.code === 1) {
        if (this.videoData[index].like == 0) {
          this.videoData[index].like = 1
          this.videoData[index].likes++
        } else {
          this.videoData[index].like = 0
          this.videoData[index].likes--
        }
      })
    },
    // 收藏
    handleCollect(row, index) {
      let item = this.videoData[index]
      if (item.favor == 0) {
        const obj = {
          vid: this.videoInfo.id,
          type: 'favorite'
        }

        this.$request('video.addRecord', obj).then((res) => {
          item.favor = 1
          item.favorites++
          // }
        })
      } else {
        const obj = {
          vid: this.videoInfo.id,
          type: 'favorite'
        }
        this.$request('video.addRecord', obj).then((res) => {
          // if (res.code === 1) {
          item.favor = 0
          item.favorites--
          // }
        })
      }
    },
    // 拖拽结束
    sliderChange(e) {
      const video = this.getVideoCtx()
      if (!video) return
      // 停止拖拽
      this.isDrag = false
      // 判断一下是否大于基础时间
      if (this.duration > 0.1) {
        // 跳到指定时间点
        video.seek(e.detail.value)
        // 并调用播放
        video.play()
      }
    },
    // 正在拖拽
    sliderChanging(e) {
      // 开始拖拽
      this.isDrag = true
      // 刷新时间
      this.dragStarTime = this.$utils.formatTime(e.detail.value)
      // 总时间
      this.dragEndTime = this.$utils.formatTime(this.duration)
    },
    // 更新进度
    videoTimeUpdate(e) {
      // if (this.isDrag) return
      const { currentTime, duration } = e.detail
      // 当前进度
      this.currentTime = this.prevTime ? this.prevTime : Math.trunc(currentTime)
      this.duration = Math.trunc(duration)
      // 上次进度
      if (this.prevTime) {
        const video = this.getVideoCtx()
        if (!video) return
        video.seek(this.currentTime)
        this.prevTime = 0
      }
      // 进度文本
      this.dragStarTime = this.$utils.formatTime(this.currentTime)
      this.dragEndTime = this.$utils.formatTime(this.duration)
    }
  }
}
</script>
<style>
uni-page-body {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.progress {
  width: 100%;
  position: absolute;
  // bottom: 20rpx;
  bottom: calc(20rpx + env(safe-area-inset-bottom));
  left: 0;
  z-index: 1;

  uni-slider {
    margin: 0 36rpx;
  }

  slider {
    margin: 0 36rpx;
  }

  .bartext {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 700;

    .text1 {
    }

    .text0 {
      padding: 0 8rpx;
    }

    .text2 {
      color: rgba(#fff, 0.5);
    }
  }

  .barview {
    @mixin whlt($w, $h, $l, $t) {
      width: $w !important;
      height: $h !important;
      margin-left: $l !important;
      margin-top: $t !important;
    }

    ::v-deep .uni-slider-handle-wrapper .uni-slider-handle,
    ::v-deep .wx-slider-handle-wrapper .wx-slider-handle {
      @include whlt(64rpx, 64rpx, -32rpx, -32rpx);
    }

    ::v-deep .uni-slider-handle-wrapper,
    ::v-deep .wx-slider-handle-wrapper {
      height: 4rpx;
      transition: all 0.3s;
    }

    ::v-deep .uni-slider-handle-wrapper .uni-slider-thumb,
    ::v-deep .wx-slider-handle-wrapper .wx-slider-thumb {
      @include whlt(12rpx, 12rpx, -6rpx, -6rpx);
    }

    &.active {
      ::v-deep .uni-slider-handle-wrapper,
      ::v-deep .wx-slider-handle-wrapper {
        height: 24rpx;
        transition: all 0.3s;
      }

      ::v-deep .uni-slider-handle-wrapper .uni-slider-thumb,
      ::v-deep .wx-slider-handle-wrapper .wx-slider-thumb {
        @include whlt(32rpx, 32rpx, -16rpx, -16rpx);
      }
    }
  }
}

.page_content {
  background: #fff;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ad_box {
    position: absolute;
    bottom: 180rpx;
    right: 30rpx;
    z-index: 1;

    .button {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: transparent;
      outline: none;
      background-image: url('https://img.nymaite.com/video_short/icons/jifen.png');
      background-size: cover;
    }
  }

  .head_content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .vmask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    color: #fff;
    background: #000;

    &.loading {
      border-radius: 16rpx;
      overflow: hidden;

      .centerinfo {
        .text {
          margin-top: 20rpx;
        }
      }
    }

    .bg {
      width: 100%;
      height: 100%;
      opacity: 0.3;
    }

    .infobox {
      position: absolute;
      bottom: 130rpx;
      left: 0;
      z-index: 1;
    }

    .centerinfo {
      width: 100%;
      position: absolute;
      top: 40%;
      left: 0;
      text-align: center;

      .text {
        font-size: 32rpx;
        margin-bottom: 30rpx;
        line-height: 48rpx;
      }

      .btn {
        width: 300rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 80rpx;
        background: #ee7f33;
        margin: 0 auto;

        &:active {
          background: rgba(#ee7f33, 0.8);
        }
      }
    }
  }

  .infobox {
    width: 100%;
    position: absolute;
    bottom: calc(50rpx + env(safe-area-inset-bottom));
    left: 0;
    z-index: 1;
    font-size: 32rpx;
    padding: 0 40rpx;

    .content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .left {
        flex: 1;
        display: flex;
        flex-direction: row;

        .text1 {
          line-height: 48rpx;
        }

        .text2 {
          font-size: 24rpx;
          color: rgba(#fff, 0.5);
          margin: 0 40rpx;
          white-space: nowrap;
          line-height: 48rpx;
        }
      }

      .right {
        color: #ee7f33;
        white-space: nowrap;
        margin-left: 20rpx;
      }
    }
  }

  .main_content {
    position: relative;
    color: #fff;
    background: #000;
    flex: 1;

    .verror {
      width: 100%;
      height: 100%;
      background: #000;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;

      .image {
        width: 100%;
        height: 100%;
        opacity: 0.3;
      }

      .content {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          font-size: 32rpx;
          color: #fff;
          margin-top: 40rpx;
        }
      }
    }
  }

  .swiper {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 16rpx;
    overflow: hidden;

    .swiper_item {
      position: relative;
      color: #fff;

      // height: 100%;
      .videos {
        width: 100%;
        height: 100%;
        position: relative;

        // flex: 1;
        .video {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
          overflow: hidden;

          // flex: 1;
          video {
            border-radius: 16rpx;
            overflow: hidden;
          }
        }

        .vcover {
          width: 100%;
          height: 100%;

          .image {
            width: 100%;
            height: 100%;
            opacity: 0.3;
          }
        }
      }
    }
  }

  .footer_content {
    background: #000;
  }
}

.sidebar {
  position: absolute;
  right: 30rpx;
  bottom: 400rpx;
  z-index: 1;

  .item {
    margin-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    &:last-child {
      margin-bottom: 0;
    }

    .image {
      width: 70rpx;
      margin: 0 auto;
      opacity: 0.9;
    }

    .text {
      font-size: 28rpx;

      &.active {
        color: #ee7f33;
      }
    }

    .btn {
      display: block;
      background: transparent;
      color: #fff;
      box-sizing: border-box;
      font-size: 28rpx;
      line-height: 40rpx;

      &::after {
        display: none;
      }
    }
  }
}

.speed {
  position: absolute;
  right: 20rpx;
  top: 16rpx;

  .doubleSpeed {
    color: #fff;
    font-size: 14rpx;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4rpx 6rpx;
  }
}

// 倍速的蒙版
.speedModal {
  background-color: rgba(0, 0, 0, 0.7);
}

.speed {
  position: absolute;
  right: 20rpx;
  top: 48rpx;

  .doubleSpeed {
    color: #fff;
    font-size: 14rpx;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4rpx 6rpx;
  }
}

.formation {
  flex-direction: column;
  bottom: 10rpx;
  width: 750rpx;
  /* width: calc(100% - 80px); */
  display: flex;
  align-items: center;
  margin-bottom: 80rpx;
}

.speedNumBox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 42rpx;
  width: 675rpx;
  height: 85rpx;
}

.speedNumBox .number {
  font-weight: 700;
  font-size: 28rpx;
  padding: 2rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.speedNumBox .active {
  color: #9b2efc;
}

.speedNumBox .noActive {
  color: #fff;
}
</style>
